<template>
	<z-paging ref="paging" v-model="xList" @query="getData" :loading-more-enabled="false">
		<view class="d-p-l-30 d-p-r-30 d-p-t-8 d-p-b-8 d-flex date-box">
			<view class="item d-flex d-row-center d-col-center" :class="{
					active: selectData == item.date
				}" v-for="(item, index) in dateList" :key="index" @click="setDate(item.date)">
				<view class="d-text-center">
					<view class="wk d-font-24">{{ item.week }}</view>
					<view class="date">{{ item.min }}</view>
				</view>
			</view>
		</view>
		<view class="d-flex position d-col-top">
			<view class="time">
				<view class="head"></view>
				<view class="item d-flex d-row-center d-text-center d-font-24" v-for="(item, index) in yList"
					:key="index">
					<view>
						<view class="line">{{ item.start_time }}</view>
						<view>{{ item.end_time }}</view>
					</view>
				</view>
			</view>
			<view class="d-flex-1">
				<view class="right-content">
					<u-scroll-list :indicator="false">
						<view class="wz" v-for="(item, index) in xList" :key="index">
							<view class="head d-font-24 d-flex d-row-center">{{ item.seat_number }}</view>
							<view class="option d-flex d-row-center d-col-center" :class="{
									none: info.fieldlist_s[index].lock || !info.fieldlist_s[index].leftNum,
									active: hasPriceId(info.fieldlist_s[index].price_id)
								}" v-for="(info, key) in yList" :key="key" @click="setSelect(info.fieldlist_s[index], info)">
								<text class="d-font-22">￥</text>
								<text class="d-font-22">{{ info.fieldlist_s[index].time_price }}</text>
							</view>
						</view>
					</u-scroll-list>
				</view>
			</view>
		</view>

		<view class="d-flex d-row-right d-p-r-30 d-p-t-10">
			<view class="d-m-l-30 d-flex" @click="aspect_img">
				<view class="d-font-26" style="color: red;">场地布局图</view>
			</view>
			<view class="d-m-l-30 d-flex">
				<view class="y"></view>
				<view class="d-font-26">已售</view>
			</view>
			<view class="d-m-l-30 d-flex">
				<view class="k"></view>
				<view class="d-font-26">可选</view>
			</view>
			<view class="d-m-l-30 d-flex">
				<view class="o"></view>
				<view class="d-font-26">已选</view>
			</view>
		</view>
		<!-- <view v-if="panel" style="width: 100%; height: 100vh;background-color:#000; 
      opacity: 0.4; 
      position: absolute;
      top:0;
      left:0;z-index: 999;">
		</view> -->
		<view v-if="pan_img" @click="pan_img = false" style="width: 100%; height: 100vh;background-color:#000;
		position: absolute;
		top:0;
		left:0;z-index: 999;">
			<!-- <image style="background-size: 100% 100%;width: 100%; max-height: 100%; margin-top: 60%;" :src="court_pic"
				@longtap="shareImg(court_pic)" mode=""></image> -->
			<image style="background-size: 100% 100%;width: 100%; max-height: 100%; margin-top: 60%;" :src="court_pic"
				@longpress="handledownload(court_pic)" mode=""></image>
		</view>
		<template slot="bottom">
			<view>
				<!-- 选中的 -->
				<u-scroll-list :indicator="false">
					<view class="d-text-center sels d-m-t-18" v-for="(item, index) in selectTimeList" :key="index">
						<view class="close" @click="deleteSelect(index)"><u-image :src="require('@/static/close.png')"
								width="36rpx" height="36rpx"></u-image></view>
						<view class="d-font-24 d-flex d-row-center h">
							{{ getDate(item.date) }}(周{{ getWeek(item.date) }})
						</view>
						<view class="d-font-24 d-flex d-row-center b">
							<view>
								<view>{{ getFieldName(item.field_id) }}</view>
								<view>{{ item.start_time }}-{{ item.end_time }}</view>
							</view>
						</view>
					</view>
				</u-scroll-list>

				<view class="d-flex d-p-l-30 d-p-r-30 d-p-t-20 d-p-b-20">
					<view class="d-flex-1">
						<text class="d-font-30 d-m-r-20">总计:</text>
						<text class="d-font-30 red bold">¥</text>
						<text class="d-font-48 red bold">{{ totalPrice }}</text>
					</view>
					<view>
						<u-button type="primary" shape="circle" :customStyle="{
								width: '320rpx'
							}" :disabled="selectTimeList.length == 0" @click="view">
							<view class="d-font-30">预定场地</view>
						</u-button>
					</view>
				</view>
				<u-safe-bottom></u-safe-bottom>
			</view>
		</template>
	</z-paging>
</template>

<script>
	import {
		getFieldNoList,
		getCourtPrice,
		getTwoDaysDate
	} from '@/common/api';
	export default {
		data() {
			return {
				yList: [], // y
				xList: [], // x and data
				id: '',
				dateList: [],
				selectData: '',
				selectTimeList: [],
				panel: false,
				court_pic: 'http://adm-tycg.dlut.edu.cn/upload/9f/02e23ebce45ac4d49e458284aa537e.png?attname=%E7%BB%841%402x.png',
				pan_img: false,
				member_id:'',
				member_type:''
			};
		},
		onLoad(e) {
			console.log(e,'111')
			this.id = e.id;
			this.member_id = e.member_id;
			this.member_type = e.member_type;
			if (e.court_name) {
				uni.setNavigationBarTitle({
					title: e.court_name
				});
			}
			getTwoDaysDate().then(res => {
				this.dateList = res;
				this.selectData = res[0]?.date;
			});
		},
		onShow() {
		},
		computed: {
			totalPrice() {
				let total = this.selectTimeList.reduce((total, item) => {
					return Number(total) + Number(item.time_price);
				}, 0);
				return total.toFixed(2);
			}
		},
		methods: {
			handledownload(court_pic) {
				const that = this
				wx.downloadFile({
					url: court_pic,
					success: res => {
						if (res.statusCode === 200) {
							uni.saveImageToPhotosAlbum({
								filePath: res.tempFilePath,
								success: function() {
									uni.showToast({
										title: '保存成功',
										duration: 2000
									})

								},
								fail: function() {
									uni.showToast({
										title: '保存失败',
										duration: 2000
									})

								}
							})
						} else {
							uni.showToast({
								title: '保存失败',
								duration: 2000
							})
						}
					}
				})
			},
			aspect_img() {
				this.pan_img = true
			},
			async getData() {
				try {
					uni.showLoading({
						title: '加载中...',
						mask: false
					});
					let res = await getFieldNoList({
						params: {
							product_id: this.id
						}
					});
					let data = res.result;
					// let {
					// 	result
					// } = await getCourtPrice({
					// 	params: {
					// 		product_id: this.id,
					// 		venue_id: 236,
					// 		date: this.selectData
					// 	}
					// });
					// this.yList = result;
					let result = await getCourtPrice({
						params: {
							product_id: this.id,
							venue_id: 236,
							date: this.selectData,
							member_id:this.member_id,
							member_type:this.member_type
						}
					});
					this.yList = result.result;
					this.court_pic = result.court_img;
					this.$refs.paging.complete(data);
					uni.hideLoading();
				} catch (e) {
					this.$refs.paging.complete(false);
				}
			},
			hasPriceId(price_id) {
				return this.selectTimeList.findIndex(v => v.price_id === price_id) > -1;
			},
			setDate(e) {
				this.selectData = e;
				// 说的不能跨天 !!!!!!!!!!!!!!
				this.selectTimeList = [];
				this.$refs.paging.reload(false);
			},
			setSelect(item, info) {
				if (item.lock || !item.leftNum) {
					return '';
				}
				let index = this.selectTimeList.findIndex(v => v.price_id === item.price_id);
				if (index > -1) {
					this.selectTimeList.splice(index, 1);
				} else {
					item.date = this.selectData;

					// 注入时间
					item.start_time = info.start_time;
					item.end_time = info.end_time;

					this.selectTimeList.push(item);
				}
			},
			getFieldName(field_id) {
				let index = this.xList.findIndex(v => v.id == field_id);
				return this.xList[index]?.seat_number;
			},
			getWeek(date) {
				let week = new Date(date).getDay();
				let weekArr = ['日', '一', '二', '三', '四', '五', '六'];
				return weekArr[week];
			},
			getDate(date) {
				return date
					.split('-')
					.slice(1)
					.join('-');
			},
			deleteSelect(index) {
				this.selectTimeList.splice(index, 1);
			},
			view() {
				// selectTimeList数据处理, 加入week、date、start_time、end_time、field_name
				let data = this.selectTimeList.map(item => {
					let index = this.xList.findIndex(v => v.id == item.field_id);
					item.field_name = this.xList[index]?.seat_number;
					item.org_date = item.date;
					item.week = this.getWeek(item.date);
					item.date = item.date; //getDate(item.date)
					item.meal_id = this.yList[0].meal_id;
					return item;
				});
				uni.setStorageSync('selectTimeList', data);
				
				uni.$u.route({
					url: '/pages/index/view',
					// type: 'redirectTo',
					params: {
						id: this.id,
						member_id:this.member_id,
						member_type:this.member_type
					}
				});
			}
		}
	};
</script>

<style lang="scss">
	.d-font-48 {
		font-size: 48rpx;
	}

	.bold {
		font-weight: bold;
	}

	.red {
		color: #ff4105;
	}

	page {
		color: #333333;

		.date-box {
			background-color: #f7f7f7;

			.item {
				width: 98rpx;
				height: 88rpx;
				border-radius: 10rpx;

				&.active {
					background-color: #ff8e05;
					color: #ffffff;
				}

				.wk {
					font-weight: bold;
				}

				.date {
					font-size: 18rpx;
				}
			}
		}

		.position {
			.head {
				height: 94rpx;
			}

			.time {
				width: 89rpx;

				.item {
					height: 86rpx;
					margin-bottom: 5rpx;

					.line {
						position: relative;

						&:before {
							content: '';
							position: absolute;
							left: 0;
							right: 0;
							bottom: 0;
							margin: auto;
							height: 1px;
							background-color: #333333;
							width: 20rpx;
						}
					}
				}
			}

			.right-content {
				width: calc(750rpx - 89rpx);
			}

			.wz {
				margin-right: 5rpx;

				.option {
					width: 109rpx;
					height: 86rpx;
					background-color: #20c71c;
					margin-bottom: 5rpx;
					color: #ffffff;

					&.active {
						background-color: #59a0ff;
					}

					&.none {
						background-color: #eaeaea;
						color: #eaeaea;
					}
				}
			}
		}

		.y,
		.k,
		.o {
			width: 30rpx;
			height: 30rpx;
			border-radius: 4rpx;
			margin-right: 10rpx;
		}

		.y {
			background-color: #eaeaea;
		}

		.k {
			background-color: #20c71c;
		}

		.o {
			background-color: #59a0ff;
		}

		.sels {
			width: 186rpx;
			min-width: 186rpx;
			height: 127rpx;
			background: #f3f3f3;
			border-radius: 10rpx;
			margin-left: 30rpx;
			position: relative;

			.close {
				width: 36rpx;
				height: 36rpx;
				position: absolute;
				right: -18rpx;
				top: -18rpx;
			}

			.h {
				height: 34rpx;
				background: #59a0ff;
				border-radius: 10rpx 10rpx 0 0;
				color: #fff;
			}

			.b {
				height: 83rpx;
			}
		}
	}
</style>